<template>
  <div>
    <div class="deepBackground">
      <el-tabs type="border-card" stretch="true" style="margin: 6px;height: 98%;width: 98%" v-model="tabsActiveName">
        <!--      日报展示-->
        <el-tab-pane style="width: 100%;height: 90vh" name="dailyNote">
          <span slot="label"><i class="el-icon-files"></i> 日报总览</span>
          <div style="display: flex;justify-content: center;">
            <div id="depMembersTable"
                 style="width: 50%;margin: 6px;height: 100%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               部门组员
            </div>

                <!--            下面是搜索条件-->
             <div
                 style="display: flex;align-items: center;justify-content: right;width: 80%; height: 100%;margin-left: 4px">

          <div style="width: 90%; display: flex;align-items: center;justify-content: center">
            <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">发布日期:</span>
             <el-date-picker
                 v-model="daliyNotePublishTimeSelectValue"
                 type="date"
                 placeholder="选择日期">
            </el-date-picker>
          </div>

          <div style="width: 10%; margin: 4px; display: flex;align-items: center;justify-content: center">
            <el-button icon="el-icon-search" circle @click=""></el-button>
            <el-button icon="el-icon-refresh" circle @click=""></el-button>
          </div>
        </div>
          </span>

              <el-table
                  :data="depMembersList"
                  height="290px"
                  style="width: 100%">
                <el-table-column
                    prop="uid"
                    label="员工Id"
                >
                </el-table-column>
                <el-table-column
                    prop="infoName"
                    label="姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="职位">
                </el-table-column>

                <el-table-column
                    prop="depName"
                    label="部门">
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="showNote(scope.row)"
                    >查看日志列表
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               日志列表
            </div>

          </span>
              <el-table
                  :data="noteList"
                  style="width: 100%"
              >
                <el-table-column
                    prop="noteId"
                    label="日志Id"
                >
                </el-table-column>
                <el-table-column
                    prop="noteName"
                    label="日志名称"
                >
                </el-table-column>
                <el-table-column
                    prop="noteType"
                    label="类型">

                  <template slot-scope="scope">
                    <el-tag
                        disable-transitions
                        effect="Plain"
                    >{{ switchNoteType(scope.row.noteType).noteTypeName }}
                    </el-tag>
                  </template>

                </el-table-column>

                <el-table-column
                    prop="publishTime"
                    label="发布时间">
                  <template slot-scope="scope">
                    {{ timeFormatConversion(scope.row) }}
                  </template>
                </el-table-column>

                <el-table-column
                    prop="noteStatus"
                    label="状态">
                  <template slot-scope="scope">
                    <el-tag
                        :type="switchNoteStatus(scope.row.noteStatus).tagStyle"
                        disable-transitions
                        effect="dark"
                    >{{ switchNoteStatus(scope.row.noteStatus).noteStatusName }}
                    </el-tag>
                  </template>
                </el-table-column>


                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="chooseNoteToShow(scope.row)"
                    >详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!--            日志预览区域-->
            <div  style="width: 50%;margin-right: 6px;margin-top: 6px;margin-bottom: 6px;height: 800px;background-color: white;
box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1); ;
">
              <!--              用户信息展示-->
              <div style="margin: 6px">
                <el-descriptions class="margin-top" title="日志详情" :column="3" :size="size" border>

                  <el-descriptions-item>
                    <template slot="label">
                      员工Id
                    </template>
                    {{this.showInfo.userId}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      姓名
                    </template>
                    {{this.showInfo.userName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      部门
                    </template>
                    {{this.showInfo.userDepName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      日志Id
                    </template>
                    {{this.showInfo.noteId}}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      日志名称
                    </template>
                    {{this.showInfo.noteName}}
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <!--            预览md区域-->
              <v-md-editor v-model="noteInfoText" height="100%"
                           mode="preview"
              ></v-md-editor>
            </div>
          </div>
        </el-tab-pane>
        <!--        周报展示-->
        <el-tab-pane style="width: 100%;height: 90vh" name="weeklyNote">
          <span slot="label"><i class="el-icon-files"></i> 周报总览</span>
          <div style="display: flex;justify-content: center;">
            <div
                 style="width: 50%;margin: 6px;height: 100%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               部门组员
            </div>

                <!--            下面是搜索条件-->
             <div
                 style="display: flex;align-items: center;justify-content: right;width: 80%; height: 100%;margin-left: 4px">

          <div style="width: 90%; display: flex;align-items: center;justify-content: center">
            <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">发布日期:</span>
             <el-date-picker
                 v-model="daliyNotePublishTimeSelectValue"
                 type="date"
                 placeholder="选择日期">
            </el-date-picker>
          </div>

          <div style="width: 10%; margin: 4px; display: flex;align-items: center;justify-content: center">
            <el-button icon="el-icon-search" circle @click=""></el-button>
            <el-button icon="el-icon-refresh" circle @click=""></el-button>
          </div>
        </div>
          </span>

              <el-table
                  :data="depMembersList"
                  height="290px"
                  style="width: 100%">
                <el-table-column
                    prop="uid"
                    label="员工Id"
                >
                </el-table-column>
                <el-table-column
                    prop="infoName"
                    label="姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="职位">
                </el-table-column>

                <el-table-column
                    prop="depName"
                    label="部门">
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="showNote(scope.row)"
                    >查看日志列表
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               日志列表
            </div>

          </span>
              <el-table
                  :data="noteList"
                  style="width: 100%"
              >
                <el-table-column
                    prop="noteId"
                    label="日志Id"
                >
                </el-table-column>
                <el-table-column
                    prop="noteName"
                    label="日志名称"
                >
                </el-table-column>
                <el-table-column
                    prop="noteType"
                    label="类型">

                  <template slot-scope="scope">
                    <el-tag
                        disable-transitions
                        effect="Plain"
                    >{{ switchNoteType(scope.row.noteType).noteTypeName }}
                    </el-tag>
                  </template>

                </el-table-column>

                <el-table-column
                    prop="publishTime"
                    label="发布时间">
                  <template slot-scope="scope">
                    {{ timeFormatConversion(scope.row) }}
                  </template>
                </el-table-column>

                <el-table-column
                    prop="noteStatus"
                    label="状态">
                  <template slot-scope="scope">
                    <el-tag
                        :type="switchNoteStatus(scope.row.noteStatus).tagStyle"
                        disable-transitions
                        effect="dark"
                    >{{ switchNoteStatus(scope.row.noteStatus).noteStatusName }}
                    </el-tag>
                  </template>
                </el-table-column>


                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="chooseNoteToShow(scope.row)"
                    >详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!--            日志预览区域-->
            <div  style="width: 50%;margin-right: 6px;margin-top: 6px;margin-bottom: 6px;height: 800px;background-color: white;
box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1); ;
">
              <!--              用户信息展示-->
              <div style="margin: 6px">
                <el-descriptions class="margin-top" title="日志详情" :column="3" :size="size" border>

                  <el-descriptions-item>
                    <template slot="label">
                      员工Id
                    </template>
                    {{this.showInfo.userId}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      姓名
                    </template>
                    {{this.showInfo.userName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      部门
                    </template>
                    {{this.showInfo.userDepName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      日志Id
                    </template>
                    {{this.showInfo.noteId}}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      日志名称
                    </template>
                    {{this.showInfo.noteName}}
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <!--            预览md区域-->
              <v-md-editor v-model="noteInfoText" height="100%"
                           mode="preview"
              ></v-md-editor>
            </div>
          </div>
        </el-tab-pane>
        <!--        月度总结展示-->
        <el-tab-pane style="width: 100%;height: 90vh" name="monthlyNote">
          <span slot="label"><i class="el-icon-files"></i> 月度总结总览</span>
          <div style="display: flex;justify-content: center;">
            <div
                style="width: 50%;margin: 6px;height: 100%;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               部门组员
            </div>

                <!--            下面是搜索条件-->
             <div
                 style="display: flex;align-items: center;justify-content: right;width: 80%; height: 100%;margin-left: 4px">

          <div style="width: 90%; display: flex;align-items: center;justify-content: center">
            <span style="font-weight: bolder;font-family: 'PingFang SC';font-size: 12px;margin: 6px">发布日期:</span>
             <el-date-picker
                 v-model="daliyNotePublishTimeSelectValue"
                 type="date"
                 placeholder="选择日期">
            </el-date-picker>
          </div>

          <div style="width: 10%; margin: 4px; display: flex;align-items: center;justify-content: center">
            <el-button icon="el-icon-search" circle @click=""></el-button>
            <el-button icon="el-icon-refresh" circle @click=""></el-button>
          </div>
        </div>
          </span>

              <el-table
                  :data="depMembersList"
                  height="290px"
                  style="width: 100%">
                <el-table-column
                    prop="uid"
                    label="员工Id"
                >
                </el-table-column>
                <el-table-column
                    prop="infoName"
                    label="姓名"
                >
                </el-table-column>
                <el-table-column
                    prop="roleName"
                    label="职位">
                </el-table-column>

                <el-table-column
                    prop="depName"
                    label="部门">
                </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="showNote(scope.row)"
                    >查看日志列表
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <span
                  style="font-size: 20px;font-family: 'PingFang SC';font-weight: bolder;margin: 6px;margin-left: 12px;height: 42px;
display: flex;align-items: center;
">
            <i class="el-icon-tickets"></i>
            <div style="width: 20%;margin: 6px">
               日志列表
            </div>

          </span>
              <el-table
                  :data="noteList"
                  style="width: 100%"
              >
                <el-table-column
                    prop="noteId"
                    label="日志Id"
                >
                </el-table-column>
                <el-table-column
                    prop="noteName"
                    label="日志名称"
                >
                </el-table-column>
                <el-table-column
                    prop="noteType"
                    label="类型">

                  <template slot-scope="scope">
                    <el-tag
                        disable-transitions
                        effect="Plain"
                    >{{ switchNoteType(scope.row.noteType).noteTypeName }}
                    </el-tag>
                  </template>

                </el-table-column>

                <el-table-column
                    prop="publishTime"
                    label="发布时间">
                  <template slot-scope="scope">
                    {{ timeFormatConversion(scope.row) }}
                  </template>
                </el-table-column>

                <el-table-column
                    prop="noteStatus"
                    label="状态">
                  <template slot-scope="scope">
                    <el-tag
                        :type="switchNoteStatus(scope.row.noteStatus).tagStyle"
                        disable-transitions
                        effect="dark"
                    >{{ switchNoteStatus(scope.row.noteStatus).noteStatusName }}
                    </el-tag>
                  </template>
                </el-table-column>


                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="chooseNoteToShow(scope.row)"
                    >详情
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!--            日志预览区域-->
            <div  style="width: 50%;margin-right: 6px;margin-top: 6px;margin-bottom: 6px;height: 800px;background-color: white;
box-shadow:0 2px 12px 0 rgba(0, 0, 0, 0.1); ;
">
              <!--              用户信息展示-->
              <div style="margin: 6px">
                <el-descriptions class="margin-top" title="日志详情" :column="3" :size="size" border>

                  <el-descriptions-item>
                    <template slot="label">
                      员工Id
                    </template>
                    {{this.showInfo.userId}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      姓名
                    </template>
                    {{this.showInfo.userName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      部门
                    </template>
                    {{this.showInfo.userDepName}}
                  </el-descriptions-item>
                  <el-descriptions-item>
                    <template slot="label">
                      日志Id
                    </template>
                    {{this.showInfo.noteId}}
                  </el-descriptions-item>

                  <el-descriptions-item>
                    <template slot="label">
                      日志名称
                    </template>
                    {{this.showInfo.noteName}}
                  </el-descriptions-item>
                </el-descriptions>
              </div>

              <!--            预览md区域-->
              <v-md-editor v-model="noteInfoText" height="100%"
                           mode="preview"
              ></v-md-editor>
            </div>
          </div>
        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "AllNoteManagement",
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")), //当前登录用户
      tabsActiveName: 'dailyNote',  //tab框的默认显示数据绑定（默认显示日报）
      depMembersList: [], //当前部门领导管理的部门员工table信息绑定
      daliyNotePublishTimeSelectValue: '', //日报时间条件查询数据绑定
      noteInfoText: '暂无日志',//日志预览选中绑定
      showInfo:{
        userId:'',
        userName:'',
        userDepName:"",
        noteId:'',
        noteName:''
      }, //日志预览展示用户信息和日志信息
      noteList:[] //选中用户的条件查询出的所有日志绑定


    }
  },

  mounted() {
    //页面加载时，去后端请求到当前用户所管理的部门的所有部门成员信息
    this.$request.get("/department/getDepMemberList", {
      params: {
        currentUserId: this.loginUser.uid
      }
    }).then(res => {
      if (res.successFlag) {
        this.depMembersList = res.data
      } else {
        this.$message.error(res.errorMsg)
      }
    })
  },
  methods: {
    //展示选中用户的日志
    showNote(chooseUser){
      //1.将选中的用户信息回填展示
      this.showInfo.userId=chooseUser.uid
      this.showInfo.userName=chooseUser.infoName
      this.showInfo.userDepName=chooseUser.depName

      //重置一些属性值
      this.showInfo.noteId=''
      this.showInfo.noteName=''
      this.noteInfoText=''

      //2.根据日志种类和userId条件查询出对应的日志信息
      this.$request.get("/note/getNoteDtoToShow",{
        params:{
          userId:chooseUser.uid,
          noteTypeName:this.tabsActiveName
        }
      }).then(res=>{
        if (res.successFlag) {
          //回填出note的文章内容和note相关信息
          this.noteList=res.data
        } else {
          this.$message.error(res.errorMsg)
        }
      })
    },
    //选中具体的日志进行展示
    chooseNoteToShow(note){
      this.showInfo.noteName=note.noteName
      this.showInfo.noteId=note.noteId
      this.noteInfoText=note.noteContent
    },
    //日志类型转换
    switchNoteType(noteType) {
      let reslut = {
        noteTypeName: ''
      }
      if (noteType === 0) {
        reslut.noteTypeName = '日报'
        return reslut
      } else if (noteType === 1) {
        reslut.noteTypeName = '周报'
        return reslut
      } else if (noteType === 2) {
        reslut.noteTypeName = '月度总结'
        return reslut
      }
      return reslut
    },
    //日期转换
    timeFormatConversion(note) {
      let showDate = ''
      /*if (publishTime != null) {
        showDate = publishTime[0] + '年' + publishTime[1] + '月' + publishTime[2] + '日' + '-' + publishTime[3] + ':' + publishTime[4]
      } else {
        showDate = '暂无日期'
      }*/
      const [year, month, day, hours, minutes] = note.publishTime;
      // Format time as "YYYY年M月D日-HH：mm"
      const formattedTime = `${year}年${month}月${day}日-${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
      // Save the formatted time string to the data property
      showDate = formattedTime
      return showDate
    },

    //日志状态转换
    switchNoteStatus(noteStatus) {
      let reslut = {
        tagStyle: '',
        noteStatusName: ''
      }
      if (noteStatus === 0) {
        reslut.tagStyle = 'warning'
        reslut.noteStatusName = '保存未发布'
        return reslut
      } else if (noteStatus === 1) {
        reslut.tagStyle = 'success'
        reslut.noteStatusName = '已发布'
        return reslut
      } else if (noteStatus === 2) {
        reslut.tagStyle = ''
        reslut.noteStatusName = '定时发布'
        return reslut
      }
      return reslut
    },


  }
}
</script>

<style scoped>
.deepBackground {
  display: flex;
  align-items: center;
  justify-content: left;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100vh;
  flex-direction: column;
}
</style>